<template>
    <div class="qilin-QilinKaitify">
        <div class="header">注意</div>
        <div class="content warning">初始化给富文本赋值内容时，不要将逻辑代码放在onMounted函数中，会导致编辑器未及时渲染而无法赋值成功！</div>
        <div class="content warning">因为本人项目的原因，涉及到的富文本编辑器功能比较浅，因为针对该编辑器只是封装了对应图片的粘贴和上传图片的功能，若有需求亦可留言作者，后续会研究加上定制化功能</div>
        <div class="content warning">更多功能各位大佬亦可直接去参考官方文档，附上链接https://www.so-better.cn/docs/kaitify-vue/guide/introduction</div>
        <br>
        <br>
        <div class="header">基本使用</div>
        <div class="content">1、自定义粘贴图片和自定义上传图片</div>
        <QilinKaitify :kaitifyConfig="kaitifyConfig1" v-model="content1"></QilinKaitify>
        <CodeMirror :codeValue="codeValue1"></CodeMirror>
        <br>
        <br>
        <div class="header">Props</div>
        <QilinTable v-model:tableConfig="propsTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Events</div>
        <QilinTable v-model:tableConfig="eventsTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Exposes</div>
        <QilinTable v-model:tableConfig="exposesTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Slots</div>
        <!-- <QilinTable v-model:tableConfig="slotsTableConfig"></QilinTable> -->
        <br>
        <br>
    </div>
</template>

<script setup>


/*
    响应式选项区域
*/


/*
    数据变量定义区域
*/
const content1 = ref("自定义粘贴图片和自定义上传图片");


/*
    计算属性等代码区域
*/
const codeValue1=computed(()=>{
    return `
        // --html部分
        <QilinKaitify :kaitifyConfig="kaitifyConfig1" v-model="content1"></QilinKaitify>
        // --js部分
        const content1 = ref("自定义粘贴图片和自定义上传图片");
        const kaitifyConfig1 = reactive({
            placeholder:"请输入内容...",
            menuPopoverProps:{
                zIndex:5000
            },
            menuImageProps:{
                customUpload:(ref,file)=>{ //自定义上传
                    // console.log(file,111);
                    let formData = new FormData();
                    formData.append("file",file);
                    fetch("您自己的后端接口",{
                        headers:{
                            Authorization:""
                        },
                        method:"post",
                        body:formData
                    }).then((response)=>{
                        // console.log(response);
                        return response.json();
                    }).then((res)=>{
                        // console.log(res);
                        ref.state.editor.commands.setImage({
                            src:res.data.url,
                            width:"300px",
                            alt:"图片加载失败"
                        });
                    });
                }
            },
            onPasteImage:(ref,file)=>{ //自定义粘贴
                // console.log(file,111);
                let formData = new FormData();
                formData.append("file",file);
                fetch("您自己的后端接口",{
                    headers:{
                        Authorization:""
                    },
                    method:"post",
                    body:formData
                }).then((response)=>{
                    // console.log(response);
                    return response.json();
                }).then((res)=>{
                    // console.log(res);
                    ref.state.editor.commands.setImage({
                        src:res.data.url,
                        width:"300px",
                        alt:"图片加载失败"
                    });
                });
            }
        });
    `
});


/*
    逻辑脚本代码区域
*/
const kaitifyConfig1 = reactive({
    placeholder:"请输入内容...",
    menuPopoverProps:{
        zIndex:5000
    },
    menuImageProps:{
        customUpload:(ref,file)=>{ //自定义上传
            // console.log(file,111);
            let formData = new FormData();
            formData.append("file",file);
            fetch("http://36.134.22.190:8061/common/upload",{
                headers:{
                    Authorization:"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiI1cXA3cldBc1FvTFFOMXZlOW5PcW9hQWdzNklmTzk1OSIsInVzZXJJZCI6MX0.ewEG_-K-bwUglyawPJmtj147CHbqxRRaiEEcTDyBYM8"
                },
                method:"post",
                body:formData
            }).then((response)=>{
                // console.log(response);
                return response.json();
            }).then((res)=>{
                // console.log(res);
                ref.state.editor.commands.setImage({
                    src:res.data.url,
                    width:"300px",
                    alt:"图片加载失败"
                });
            });
        }
    },
    onPasteImage:(ref,file)=>{ //自定义粘贴
        // console.log(file,111);
        let formData = new FormData();
        formData.append("file",file);
        fetch("http://36.134.22.190:8061/common/upload",{
            headers:{
                Authorization:"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiI1cXA3cldBc1FvTFFOMXZlOW5PcW9hQWdzNklmTzk1OSIsInVzZXJJZCI6MX0.ewEG_-K-bwUglyawPJmtj147CHbqxRRaiEEcTDyBYM8"
            },
            method:"post",
            body:formData
        }).then((response)=>{
            // console.log(response);
            return response.json();
        }).then((res)=>{
            // console.log(res);
            ref.state.editor.commands.setImage({
                src:res.data.url,
                width:"300px",
                alt:"图片加载失败"
            });
        });
    }
});

const propsTableConfig=reactive({
    elTableConfig:{
        border:true,
        defaultExpandAll:true,
        rowKey:"attrName",
        cellStyle:({row,column,rowIndex,columnIndex})=>{
        }
    },
    headerConfig:[
        {
            label:"属性名",
            prop:"attrName",
            type:"text",
            width:200
        },
        {
            label:"类型",
            prop:"attrType",
            type:"text",
            width:120
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        },
        {
            label:"可取值",
            prop:"valuable",
            type:"text",
            replaceValue:"-"
        },
        {
            label:"默认值",
            prop:"default",
            type:"text",
            width:150
        }
    ],
    tableData:[
        {
            attrName:"content",
            attrType:"string",
            description:"富文本编辑器显示内容",
            valuable:"-",
            default:"-"
        },
        {
            attrName:"kaitifyConfig",
            attrType:"object",
            description:"富文本编辑器配置项",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"disabled",
                    attrType:"boolean",
                    description:"是否禁用编辑器",
                    valuable:"true | false",
                    default:"false"
                },
                {
                    attrName:"locale",
                    attrType:"string",
                    description:"编辑器语言环境",
                    valuable:"zh-cn | en-us",
                    default:"zh-cn"
                },
                {
                    attrName:"hideBubbleOnMousedown",
                    attrType:"boolean",
                    description:"鼠标在编辑器内按下时是否隐藏气泡栏，默认false，若设为true，则即使bubbleProps的visible为true，也不显示气泡栏",
                    valuable:"true | false",
                    default:"false"
                },
                {
                    attrName:"autofocus",
                    attrType:"boolean",
                    description:"编辑器渲染后是否自动聚焦",
                    valuable:"true | false",
                    default:"false"
                },
                {
                    attrName:"placeholder",
                    attrType:"string",
                    description:"编辑器的占位内容",
                    valuable:"-",
                    default:"请输入内容..."
                },
                {
                    attrName:"dark",
                    attrType:"boolean",
                    description:"编辑器是否呈深色风格",
                    valuable:"true | false",
                    default:"false"
                },
                {
                    attrName:"style",
                    attrType:"string",
                    description:"编辑器样式",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"allowCopy",
                    attrType:"boolean",
                    description:"是否允许复制操作",
                    valuable:"true | false",
                    default:"true"
                },
                {
                    attrName:"allowPaste",
                    attrType:"boolean",
                    description:"是否允许粘贴操作",
                    valuable:"true | false",
                    default:"true"
                },
                {
                    attrName:"allowCut",
                    attrType:"boolean",
                    description:"是否允许剪切操作",
                    valuable:"true | false",
                    default:"true"
                },
                {
                    attrName:"allowPasteHtml",
                    attrType:"boolean",
                    description:"是否允许粘贴html，即粘贴内容是否携带样式",
                    valuable:"true | false",
                    default:"true"
                },
                {
                    attrName:"bubbleProps",
                    attrType:"object",
                    description:"编辑器气泡栏相关属性配置",
                    valuable:"-",
                    default:"-",
                    children:[
                        {
                            attrName:"visible",
                            attrType:"boolean",
                            description:"是否显示气泡栏",
                            valuable:"true | false",
                            default:"true",
                        },
                        {
                            attrName:"zIndex",
                            attrType:"number",
                            description:"气泡栏的 z-index 层级",
                            valuable:"-",
                            default:"5",
                        }
                    ]
                },
                {
                    attrName:"menuPopoverProps",
                    attrType:"object",
                    description:"菜单组件的浮层属性配置",
                    valuable:"-",
                    default:"-",
                    children:[
                        {
                            attrName:"arrow",
                            attrType:"boolean",
                            description:"浮层是否显示三角形",
                            valuable:"true | false",
                            default:"true",
                        },
                        {
                            attrName:"zIndex",
                            attrType:"number",
                            description:"浮层的z-index层级",
                            valuable:"-",
                            default:"10",
                        }
                    ]
                },
                {
                    attrName:"menuImageProps",
                    attrType:"object",
                    description:"image图片菜单组件的属性",
                    valuable:"-",
                    default:"-",
                    children:[
                        {
                            attrName:"customUpload",
                            attrType:"function",
                            description:"自定义本地图片上传的方法，该方法返回一个字符串值，表示上传后的图片文件地址，回调参数为 File 文件，如果不设置该方法，图片默认以 base64 字符串的形式插入编辑器中",
                            valuable:"(file)=>{}",
                            default:"-",
                        }
                    ]
                },
                {
                    attrName:"onPasteImage",
                    attrType:"function",
                    description:"编辑器粘贴图片时触发，返回true表示使用默认逻辑，返回false表示进行自定义处理",
                    valuable:"(editor,file)=>{}",
                    default:"-"
                },
                {
                    attrName:"onPasteVideo",
                    attrType:"function",
                    description:"编辑器粘贴图片时触发，返回true表示使用默认逻辑，返回false表示进行自定义处理，这边默认封装的是自定义处理",
                    valuable:"(editor,file)=>{}",
                    default:"-"
                },
                {
                    attrName:"onPasteFile",
                    attrType:"function",
                    description:"编辑器粘贴除了图片和视频以外的文件时触发，需要自定义处理",
                    valuable:"(editor,file)=>{}",
                    default:"-"
                }
            ]
        }
    ],
    paginationsObj:{
        isHide:true
    }
});
const eventsTableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"事件名",
            prop:"eventName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"eventType",
            type:"text",
            width:120
        },
        {
            label:"参数",
            prop:"eventValue",
            type:"text",
            width:120
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        }
    ],
    tableData:[
        {
            eventName:"success",
            eventType:"function",
            eventValue:"value",
            description:"富文本编辑器失去焦点后触发的事件，得到编辑器的内容"
        }
    ],
    paginationsObj:{
        isHide:true
    }
});
const exposesTableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"方法名",
            prop:"exposeName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"exposeType",
            type:"text",
            width:100
        },
        {
            label:"参数",
            prop:"exposeValue",
            type:"text",
            width:100
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        },
    ],
    tableData:[
        {
            exposeName:"handleBlur",
            exposeType:"function",
            exposeValue:"-",
            description:"富文本编辑器失去焦点后触发"
        },
    ],
    paginationsObj:{
        isHide:true
    }
});


/*
    生命周期等代码区域
*/


</script>

<style lang="scss" scoped>
.qilin-{

}
</style>
